/**
 * Copyright 2024 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@use "sass:color";
@use "sass:map";

@use "../generated" as gen;

$timeline-border-horizontal-color: rgba(0, 0, 0, 0.1);
$layer-heights: (
  "kind": 25px,
  "namespace": 25px,
  "name": 30px,
  "subresource": 22px,
);
$layer-background: (
  "kind": rgba(63, 81, 181, 1),
  "namespace": rgba(100, 100, 100, 1),
  "name": rgba(200, 200, 200, 1),
  "subresource": white,
);
$layer-label-color: (
  "kind": white,
  "namespace": white,
  "name": black,
  "subresource": black,
);
$layer-left-padding: (
  "kind": 5px,
  "namespace": 5px,
  "name": 10px,
  "subresource": 10px,
);
$layer-label-bold: (
  "kind": true,
  "namespace": true,
  "name": false,
  "subresource": false,
);

$timeline-selection-tint-color: #40ba8d;
$timeline-body-background-color-tint: 0%;

$timeruler-tip-hover: rgba(63, 81, 181, 1);
$timeruler-hover-background: rgba(63, 81, 181, 0.3);
$timeruler-tip: rgba(0, 0, 0, 0.2);

@mixin layer-header-style($layer-type) {
  height: map.get($layer-heights, $layer-type);
  position: relative;
  box-sizing: border-box;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.3);
  border-top: 0.5px solid rgba(0, 0, 0, 0.3);

  .relationship-label {
    @include gen.parent-relationship-label-styles;

    padding: 1px 3px;
    border-radius: 3px;
    margin-right: 5px;
  }

  &.selected p {
    background-color: color.mix(
      map.get($layer-background, $layer-type),
      color.adjust($timeline-selection-tint-color, $lightness: -30%),
      60%
    );
  }

  &.children-of-selected p {
    background-color: color.mix(
      map.get($layer-background, $layer-type),
      $timeline-selection-tint-color,
      60%
    );
  }

  &.highlight p {
    background-color: color.mix(
      map.get($layer-background, $layer-type),
      $timeline-selection-tint-color,
      40%
    );
  }

  &.selected {
    border-bottom: 1px solid
      color.adjust($timeline-selection-tint-color, $lightness: -30%);
    border-top: 1px solid
      color.adjust($timeline-selection-tint-color, $lightness: -30%);
    border-left: 5px solid
      color.adjust($timeline-selection-tint-color, $lightness: -30%);
  }

  p {
    margin: 0;
    background-color: map.get($layer-background, $layer-type);
    color: map.get($layer-label-color, $layer-type);
    height: map.get($layer-heights, $layer-type);
    line-height: map.get($layer-heights, $layer-type);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: map.get($layer-left-padding, $layer-type);
    user-select: none;

    @if map.get($layer-label-bold, $layer-type) {
      font-weight: 800;
    }
  }
}

@mixin timeline-child-border($thickness, $color) {
  box-sizing: border-box;
  border-bottom: $thickness solid $color;
  border-top: $thickness solid $color;
  border-left: calc($thickness) solid $color;
  border-right: calc($thickness) solid $color;
}

@mixin timeline-body-color($layer-type) {
  .timeline-body {
    background-color: color.adjust(
      map.get($layer-background, $layer-type),
      $lightness: $timeline-body-background-color-tint
    );
  }
}

.tl-header-kind {
  @include layer-header-style("kind");
  @include timeline-body-color("kind");
}

.tl-header-namespace {
  @include layer-header-style("namespace");
  @include timeline-body-color("namespace");
}

.tl-header-name {
  @include layer-header-style("name");
}

.tl-header-subresource {
  @include layer-header-style("subresource");
}

.sticky-header {
  position: fixed;
  z-index: 100;

  div {
    width: var(--explorer-pane-width);
    box-shadow: 0px 1px 1px 1px black;
  }
}

.wrapper {
  height: 100%;
}

$timeruler-highlight-border-thickness: 5px;

.scaling-mode {
  .timeruler-view {
    background-color: $timeruler-hover-background;
    border-left: $timeruler-highlight-border-thickness solid
      $timeruler-tip-hover;
    border-right: $timeruler-highlight-border-thickness solid
      $timeruler-tip-hover;
    border-top: $timeruler-highlight-border-thickness solid $timeruler-tip-hover;
    cursor: col-resize;

    .scale-time-tip-inner {
      font-weight: 600;
      background-color: $timeruler-tip-hover;
    }
  }
}

.timeruler-view {
  // z-index: 998 TODO: Is it ok to remove this?
  box-sizing: content-box;
  border: $timeruler-highlight-border-thickness solid transparent;

  .scale-time-tip {
    color: gray;
    font-size: small;
    user-select: none;
  }

  .scale-time-tip-inner {
    background-color: $timeruler-tip;
    padding: 3px 10px;
    color: white;
    white-space: nowrap;
  }

  &:hover {
    background-color: $timeruler-hover-background;
    border-left: $timeruler-highlight-border-thickness solid
      $timeruler-tip-hover;
    border-right: $timeruler-highlight-border-thickness solid
      $timeruler-tip-hover;
    border-top: $timeruler-highlight-border-thickness solid $timeruler-tip-hover;
    cursor: col-resize;

    .scale-time-tip-inner {
      font-weight: 600;
      background-color: $timeruler-tip-hover;
    }
  }
}

.timeline-root-container {
  display: grid;
  grid-template-areas: "summary resizer timeruler" ".resizer timeline-float-anchor";
  grid-template-rows: 60px 1fr;
  grid-template-columns: var(--explorer-pane-width) 5px 1fr;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.summary-view {
  grid-area: summary;
  position: relative;
  z-index: 2001;
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.3);
}

.timeruler-view {
  grid-area: timeruler;
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.3);
}

.sub-label {
  font-weight: normal;
  margin-left: 5px;
}

// Scrollable timeline area
.chart-scroll {
  overflow-y: auto;
  overflow-x: hidden;

  // Force showing scrollbar
  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgb(63, 81, 181);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  }

  grid-row: 2;
  grid-column: 1;
  grid-column-end: span 3;
  position: relative;

  .chart-timeline-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    contain: content;

    .scrollable-layout-wrapper {
      display: flex;

      .explorer-area {
        width: var(--explorer-pane-width);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
      }

      .spacer {
        width: 5px;
      }

      .chart-area {
        &:hover {
          cursor: crosshair;
        }

        width: calc(100% - var(--explorer-pane-width) - 5px);
      }
    }
  }
}

.chart-body-shadow {
  overflow: hidden;
  grid-row: 2;
  grid-column: 2;
  grid-column-end: span 2;
}

$layer-log-filter-shadow: 2000;
$layer-legends: 3000;
$layer-hover-tooltips: 4000;

.resizer {
  grid-area: resizer;
  min-width: 5px;
  width: 5px;
  margin: 0;
  background-color: lightgray;
  position: relative;
  z-index: 2000;
  box-shadow: 1px 0 5px 1px rgba(0, 0, 0, 0.3);

  &:hover {
    background-color: gray;
    cursor: col-resize;
  }
}

.timeline-background {
  pointer-events: none;
  grid-column: 3;
  grid-row: 1;
  grid-row-end: span 2;
}

.fill-background {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.background-wrap {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.log-detail-hover-relative {
  position: relative;
}

.log-detail-hover-anchor {
  pointer-events: none;
  position: fixed;
  z-index: $layer-hover-tooltips;
  top: 0;
  left: 0;
  right: 0;
}

.log-detail-hover {
  user-select: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  color: white;
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  margin: 10px 0px 0px 10px;

  .log-detail-properties {
    display: flex;
    font-size: 10px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .property {
    margin: 0px 5px;

    &.ts {
      color: #3f51b5;

      .ts-inner {
        background-color: white;
        border-radius: 3px;
        font-weight: 600;
        padding: 0px 3px;
      }
    }

    &.logtype {
      color: white;

      .logtype-inner {
        @include gen.log-type-shape-colors-for-all;

        border-radius: 3px;
        font-weight: 600;
        padding: 0px 3px;
      }
    }

    &.revisionstate {
      color: white;

      .revisionstate-inner {
        @include gen.revisionstate-type-colors-for-all;

        border-radius: 3px;
        font-weight: 600;
        padding: 0px 3px;
      }
    }

    .label {
      display: inline-block;
      margin: 0 5px;
      font-weight: bold;
    }
  }

  .message {
    white-space: pre-wrap;
    font-size: 8px;
    line-height: 10px;
    max-width: 500px;
    margin: 3px 10px 5px 10px;
  }

  .warn {
    background-color: rgba(0, 255, 255, 0.3);
    font-size: x-small;

    .message {
      margin: 0px 0px 2px 0;
    }

    .emp {
      mat-icon {
        width: 12px;
        height: 12px;
        font-size: 12px;
        line-height: 12px;
        margin: (-2px) 0px;
      }

      margin: 0;
      font-weight: bold;
      padding: 0px 20px 0px 5px;
    }
  }
}

.log-detail-row,
.log-detail-count {
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.log-detail-count {
  font-size: smaller;
  margin: 0px 10px 0px 10px;
}

.log-detail-resourcepath {
  background-color: rgba(255, 255, 255, 0.4);
  margin: 0px;
  padding: 0px 10px 0px 10px;

  .parent-path {
    font-size: smaller;
  }

  .resource-name {
    font-weight: 600;
  }

  .hover-resource-relationship {
    font-size: smaller;

    @include gen.parent-relationship-label-styles;

    padding: 1px 3px;
    border-radius: 3px;
    margin-right: 5px;
  }
}

.chart-area-overlay {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.timeline-float-anchor {
  grid-area: timeline-float-anchor;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: relative;
}
